.plane {
    position: absolute;
    font-family: "微软雅黑";
    font-size: 20px;
    border-style: solid;
    border-color: rgba(80, 79, 79, 0.31);
    border-width: 2px;
    border-bottom-width: 0;
}

.plane-content {
    line-height: 30px;
}

.plane>div {
    position: relative;
    padding: 20px;
    height: 100%;
}

.plane>div:after {
    content: "";
    border-color: transparent;
    border-style: solid;
    height: 0;
    width: 0;
    position: absolute;
    top: 15%;
}

.pright>div:after {
    border-width: 30px 35px 10px 0px;
    /*    border-right-color: bisque;*/
    left: -35px;
}

.pleft>div:after {
    border-width: 30px 0px 10px 35px;
    border-left-color: bisque;
    right: -35px;
}

.pleft {
    border-right-width: 0;
}

.pright {
    border-left-width: 0;
}


/*具体页面*/


/*第一个页面*/

#pageone>.pleft {
    left: 15%;
    top: 100px;
    background-color: rgba(235, 140, 29, 0.79);
    height: 400px;
    width: 300px;
    color: #fde1ba;
}

#pageone>.pleft>div:after {
    border-left-color: rgba(235, 140, 29, 0.79);
}

#pageone>.pright {
    right: 15%;
    top: 100px;
    background-color: rgba(147, 189, 247, 0.8);
    height: 300px;
    width: 250px;
    color: rgba(48, 48, 250, 0.92);
}

#pageone>.pright>div:after {
    border-right-color: rgba(147, 189, 247, 0.8);
}
/*animation*/
#pageone>.pleft.active{
    animation: leftin 0.8s ease-in-out forwards;
}
#pageone>.pright.active{
    animation: downin 0.8s ease-in-out forwards;
}

/*第二个页面*/

#pagetwo>.pleft{
    left: 4%;
    bottom: 50px;
    background-color: rgba(15, 15, 25, 0.79);
    height: 500px;
    width: 400px;
    color: grey;
}

#pagetwo>.pleft>div:after {
    border-left-color: rgba(15, 15, 25, 0.79);
}

#pagetwo>.pright {
    right: 5%;
    bottom: 100px;
    background-color: rgba(192, 192, 192, 0.79);
    height: 350px;
    width: 300px;
    color: rgba(5, 30, 98, 0.9);
}

#pagetwo>.pright>div:after {
    border-right-color: rgba(192, 192, 192, 0.79);
}

#pagetwo>.pleft.active{
    animation: upin 0.8s ease-in-out forwards;
}
#pagetwo>.pright.active{
    animation: downin 0.8s ease-in-out forwards;
}
/*第三个页面*/

#pagethr>.pleft {
    left: 3%;
    bottom: 80px;
    background-color: rgba(88, 124, 204, 0.62);
    height: 300px;
    width: 500px;
    color: rgba(17, 18, 18, 0.83);
}

#pagethr>.pleft>div:after {
    border-left-color: rgba(88, 124, 204, 0.62);
}

#pagethr>.pright {
    right: 3%;
    top: 100px;
    background-color: rgba(250, 111, 10, 0.54);
    height: 200px;
    width: 350px;
    color: rgba(70, 38, 21, 0.94);
}

#pagethr>.pright>div:after {
    border-right-color: rgba(250, 111, 10, 0.54);
}
#pagethr>.pleft.active{
    animation: downin 0.8s ease-in-out forwards;
}
#pagethr>.pright.active{
    animation: rightin 0.8s ease-in-out forwards;
}
.plane-content p {
    text-indent: 2em;
}
.plane{
    opacity: 0;
}